<script setup lang='ts'>
import { ref, reactive } from 'vue'
import axios from 'axios'
const account = ref("ceshi06")
const password = ref("123456")

const login = async () => {
    if (account.value && password.value) {
        const res = await axios.post("https://meikou-api.itheima.net/login", {
            account: account.value,
            password: password.value
        })
        alert(JSON.stringify(res.data))
    } else {
        alert('用户密码不能为空')
    }
}
</script>

<template>
    <div class="container">
        <div class="login_info">
            <input placeholder="请输入用户名" type="text" v-model="account">
            <input placeholder="请输入密码" type="password" v-model="password">
            <button @click="login">登录</button>
        </div>
    </div>

</template>

<style scoped>
.container {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login_info {
    width: 400px;
    height: 300px;
    background-color: pink;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
}

.login_info input {
    margin: 20px 0;
    width: 100%;
    height: 40px;
    padding: 0 10px;
    box-sizing: border-box;
}

.login_info button {
    margin: 20px 0;
    width: 100%;
    height: 50px;
    border-radius: 15px;
    color: white;
    font-size: 18x;
    background-color: darkorange;
    border: darkorange;
}
</style>